<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.css" />
	<script type="text/javascript" src="js/vue2.5.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
	<script src="js/layer/layer.js"></script>
</head>
<body>
	<div class="container">
	<table class="table table-bordered table-striped" id="dataTable">
				<thead>
					<tr>
						<th>员工编号</th>
						<th>员工姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>地址</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(emp,index) in empData">
						<td>{{emp.id}}</td>
						<td>{{emp.name}}</td>
						<td>{{emp.age}}</td>
						<td>{{emp.sex}}</td>
						<td>{{emp.adress}}</td>
						<td>
							<input type="button" value="删除" class="btn btn-danger btn-sm " @click="del(emp.id,index)" />
							<input type="button" value="详情" class="btn btn-info btn-sm " @click="toUpdate(emp.id)"/>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="">
				<a href="addEmp.html" class="btn btn-success btn-block">增加员工</a>
			</div>
				
			
		</div>
		<script>
			//vue
			var vue = new Vue({
				el: '.container',
				data: {
					empData: [] //员工数据
				},
				methods: {
					//查询数据方法
					query: function() {
						axios.get("http://localhost:8080/TestSSM"  + '/emp/query')
							.then(function(response) {
								this.empData = response.data;
							}.bind(this))
							.catch(function(error) {
								layer.msg('获得员工数据失败');
							});
					},
					//删除
					del:function(id,index){
						if(!window.confirm('确定要删除此人嘛？'))
							return;
						//ajax
						axios.delete("http://localhost:8080/TestSSM"  + '/emp/delete',{
								params:{
									id:id
								}
							})
							.then(function(response) {
								this.empData.splice(index,1);
								layer.msg('删除员工成功！');
							}.bind(this))
							.catch(function(error) {
								layer.msg('删除员工失败');
							});
					},
					//修改
					toUpdate:function(id){
						
						layer.open({
							title:'员工详情',
							type:2,
							area:['700px','600px'],
							content:'updateEmp.html?id='+id  
						});
					
					}
				},
				mounted: function() {
					this.query();
				}
			})
		</script>
</body>
</html>